<template>
    <BasicLayout>
        <template #wrapper>
            <el-card class="box-card">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button
                            v-permisaction="['ymuserscore:ymuserscore:add']"
                            type="primary"
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAdd"
                        >新增
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-permisaction="['ymuserscore:ymuserscore:edit']"
                            type="success"
                            icon="el-icon-edit"
                            size="mini"
                            :disabled="single"
                            @click="handleUpdate"
                        >修改
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            v-permisaction="['ymuserscore:ymuserscore:remove']"
                            type="danger"
                            icon="el-icon-delete"
                            size="mini"
                            :disabled="multiple"
                            @click="handleDelete"
                        >删除
                        </el-button>
                    </el-col>
                </el-row>

                <el-table v-loading="loading" :data="ymuserscoreList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"/>
                    <el-table-column label="是否过期" align="center" prop="isLate"
                                     :formatter="isDatedFormat" width="100">
                        <template slot-scope="scope">
                            {{ scope.row.isLate == 'T'?"过期":"未过期" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="优惠券名称" align="center" prop="couponName"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="是否使用" align="center" prop="couponStatus"
                                     :formatter="isDatedFormat" width="100">
                        <template slot-scope="scope">
                            {{ scope.row.isLate == 'unuse'?"未使用":"已使用" }}
                        </template>
                    </el-table-column>
                    <el-table-column label="过期时间" align="center" prop="endDate"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="价格" align="center" prop="salePrice"
                                     :show-overflow-tooltip="true"/>
                    <el-table-column label="抵扣金额" align="center" prop="deductionPrice"
                                     :show-overflow-tooltip="true"/>
                </el-table>

                <pagination
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageIndex"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                />

                <!-- 添加或修改对话框 -->
                <el-dialog :title="title" :visible.sync="open" width="500px">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                        <el-form-item label="是否过期" prop="isDated">
                            <el-radio-group v-model="form.isDated">
                                <el-radio
                                    v-for="dict in isDatedOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="订单号" prop="orderNumber">
                            <el-input v-model="form.orderNumber" placeholder="订单号"
                            />
                        </el-form-item>
                        <el-form-item label="所得积分" prop="score">
                            <el-input v-model="form.score" placeholder="所得积分"
                            />
                        </el-form-item>
                        <el-form-item label="积分来源" prop="scoreType">
                            <el-radio-group v-model="form.scoreType">
                                <el-radio
                                    v-for="dict in scoreTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="进出" prop="type">
                            <el-radio-group v-model="form.type">
                                <el-radio
                                    v-for="dict in typeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="用户id" prop="userId">
                            <el-input v-model="form.userId" placeholder="用户id"
                            />
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>
            </el-card>
        </template>
    </BasicLayout>
</template>

<script>
import {
    UserCouponList
} from '@/api/coupon/coupon/index'

export default {
    name: "Config",
    props: {
        phone: {
            type: String,
            default: () => {
                return "";
            }
        },
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            isEdit: false,
            // 类型数据字典

            ymuserscoreList: [],
            isDatedOptions: [], scoreTypeOptions: [], typeOptions: [],
            // 查询参数
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                phone: this.phone,
                type: 1,

            },
            // 表单参数
            form: {
                phone: this.phone
            }
            ,
            // 表单校验
            rules: {
                phone:
                    [
                        {required: true, message: '用户电话号码不能为空', trigger: 'blur'}
                    ],
            }
        }
    },
    created() {
        this.getList()
        this.getDicts('sys_bool').then(response => {
            this.isDatedOptions = response.data
        })

        this.getDicts('score_type').then(response => {
            this.scoreTypeOptions = response.data
        })

        this.getDicts('score_flush').then(response => {
            this.typeOptions = response.data
        })

    },
    watch: {
        //监听子控件内容的改动,发送给父级组件
        userId: {
            handler (newValue, oldValue) {

                this.queryParams.phone = this.phone
                this.getList();
            },
            deep: true
        },
        phone: {
            handler (newValue, oldValue) {
                console.log(this.phone)
                console.log("dyj1")
                this.queryParams.phone = this.phone
                this.getList();
            },
            deep: true,
        },
    },
    methods: {
        /** 查询参数列表 */
        getList() {
            this.loading = true
            UserCouponList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                    this.ymuserscoreList = response.data.list
                    this.total = response.data.count
                    this.loading = false
                }
            )
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 表单重置
        reset() {
            this.form = {

                isDated: undefined,
                orderNumber: undefined,
                score: undefined,
                scoreType: undefined,
                type: undefined,
                userId: undefined,
                userScoreId: undefined,
            }
            this.resetForm('form')
        },
        isDatedFormat(row) {
            return this.selectDictLabel(this.isDatedOptions, row.isDated)
        },
        scoreTypeFormat(row) {
            return this.selectDictLabel(this.scoreTypeOptions, row.scoreType)
        },
        typeFormat(row) {
            return this.selectDictLabel(this.typeOptions, row.type)
        },


        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageIndex = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = []
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加用户积分表'
            this.isEdit = false
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.userScoreId)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            const userScoreId =
                row.userScoreId || this.ids
            getYmUserScore(userScoreId).then(response => {
                this.form = response.data
                this.open = true
                this.title = '修改用户积分表'
                this.isEdit = true
            })
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.userScoreId !== undefined) {
                        updateYmUserScore(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('修改成功')
                                this.open = false
                                this.getList()
                            } else {
                                this.msgError(response.msg)
                            }
                        })
                    } else {
                        addYmUserScore(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('新增成功')
                                this.open = false
                                this.getList()
                            } else {
                                this.msgError(response.msg)
                            }
                        })
                    }
                }
            })
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const Ids = row.userScoreId || this.ids
            this.$confirm('是否确认删除编号为"' + Ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                return delYmUserScore(Ids)
            }).then(() => {
                this.getList()
                this.msgSuccess('删除成功')
            }).catch(function () {
            })
        }
    }
}
</script>

